const ctx = new AudioContext();

const input = document.createElement("input");
input.type = "range";
input.min = 0;
input.max = 2500;
input.value = 200;
input.step = 50;
input.setAttribute("style", "display:block;width: 80%;margin: 100px auto;");
input.addEventListener("change", async (e) => {
  if (ctx.state === "suspended") {
    await ctx.resume().catch(console.error);
  }
  const osc = ctx.createOscillator();
  osc.connect(ctx.destination);
  osc.frequency.value = +e.target.value;
  osc.start(ctx.currentTime);
  osc.stop(ctx.currentTime + 0.2);
  osc.addEventListener("ended", () => {
    osc.disconnect();
  });
});
document.body.appendChild(input);
